<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片动画循环JS</title>
<style>
  .carousel {
    width: 300px; /* 设置为你想要的大小 */
    height: 200px;
    overflow: hidden;
    position: relative;
  }
  .carousel img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
  }
</style>
</head>
<body>

<div class="carousel">
  <img src="./美食/川菜3.png" alt="Image 1">
  <img src="./美食/徽菜3.png" alt="Image 2">
  <img src="./美食/浙菜1.png" alt="Image 3">
</div>

<script>
  const carousel = document.querySelector('.carousel');
  const images = carousel.querySelectorAll('img');
  let position = 50; // 图片的当前位置

  function moveImages() {
    position -= 100; // 每次移动100%，即一张图片的宽度
    if (position < -200) {
      position = 0; // 当移动到第三张图片后，重置位置
    }
    carousel.style.transform = `translateX(${position}%)`;
  }

  // 设置动画间隔
  setInterval(moveImages, 2000); // 每2秒移动一次
</script>

</body>
</html>

 
